<template>
    <div class="app-container"> 

      <el-container>
        <el-header>
          <el-row :gutter="20">

            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-button type="primary" @click="AddCourse()">创建课程</el-button>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-input
                  placeholder="课程名称"
                  v-model="SelectCourseVo.cname"
                  clearable>
                </el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-input
                  placeholder="课程类型(如Java)"
                  v-model="SelectCourseVo.type"
                  clearable>
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-button type="primary" plain @click="fetchData()">查询</el-button>
                <el-button type="warning" plain @click="ClearSelect()">清空所有条件</el-button>
              </div>
            </el-col>

          </el-row>
        </el-header>


        <el-main>
          <el-col :span="6" v-for="o in courseList" :key="o.length">
            <div >
              <ul class="course-list">  
                <li class="course clearfix catalog_3518381  learnCourse" id="c_222754266" style="display:list-item">
                  <div class="course-cover">
                    <!-- <a href="http://8.130.15.110:8800/upload/head/TestVideo.mp4" target="_blank" tabindex="-1" style="outline: none;">
                      <img :src="o.url">
                    </a> -->
                    
                    <img :src="o.url" @click="StepPage(o)">

                    <ul class="hanlde-list">
		                  <li @click="EditCourse(o.id)">编辑</li>
		                  <li @click="RemoveCourse(o.id)">删除</li>
                    </ul>
                  </div>
                  <div class="course-info">
                    <h3 class="inlineBlock">
                      <a class="color1" href="http://8.130.15.110:8800/upload/head/TestVideo.mp4" target="_blank">
                        <span class="course-name overHidden2" style="word-break: break-all;">
                         {{o.courseName}}
                        </span>
                        <i></i>
                      </a>
                    </h3>
                    <p>{{o.description}}</p>
                  </div>
                </li>
              </ul>
            </div>
        </el-col>
        </el-main>
      </el-container>

          <!--新增表单-->
          <el-dialog title="新增课程" :visible.sync="addVisible">
            <el-form :model="CourseDate">
              <el-form-item label="课程图片">
                <el-upload
                class="avatar-uploader"
                :headers="config"
                action="/dev-api/admin/course/course/coursePicture"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                >
                <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="图片预览">
                <template>
                  <img :src="CourseDate.url" width="240" height="130" />
                </template>
              </el-form-item>
              <el-form-item label="课程名称"   >
                <el-input v-model="CourseDate.courseName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程类型"   >
                <el-input v-model="CourseDate.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程描述"   >
                <el-input v-model="CourseDate.description" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addVisible = false">取 消</el-button>
              <el-button type="primary" @click="Add()">添加课程</el-button>
            </div>
          </el-dialog>

          <!--编辑表单-->
          <el-dialog title="编辑课程" :visible.sync="dialogVisible">


            <el-form :model="CourseDate">
              <el-form-item label="课程图片">
              
                <el-upload
                class="avatar-uploader"
                :headers="config"
                action="/dev-api/admin/course/course/coursePicture"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                >
                <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="图片预览">
                <template>
                  <img :src="CourseDate.url" width="240" height="130" />
                </template>
              </el-form-item>
              <el-form-item label="课程名称"   >
                <el-input v-model="CourseDate.courseName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程类型"   >
                <el-input v-model="CourseDate.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="课程描述"   >
                <el-input v-model="CourseDate.description" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editUpdata()">确 定</el-button>
            </div>
          </el-dialog>
      
    </div>
</template>

<script>
import api from '@/api/LearnSpace/Course'
import vapi from '@/api/LearnSpace/Video'
import { mapGetters } from 'vuex'
// import { Row } from 'element-ui'
export default {
  computed: {
      config() {
        return { token: this.token};
      },
    ...mapGetters([
      'name',
      'token',
    ])
  },
  // 定义数据
  data() {
    return {
        courseList:[],
        checkList: [],
        dialogVisible:false,  //编辑表单可视状态
        addVisible:false, //新增表单可视状态
        CourseDate:{
          id:'',
          name: '',   //教师名字
          teacherId: '',   //教师id
          courseName:'',  //课程名称
          type:'',  //课程类型
          // status:'',  //启用状态
          description: '',  //课程描述
          url:'',  //图片数据回显用的url
        },
        SelectCourseVo:{
          teacherid:'',
          // teachername:'',
          cname:'',
          type:'',
        },


        

    }
  },

  //当页面加载时获取数据
  created() {
    this.fetchData()
  },

  methods: {
    fetchData(){
      api.getMyPageList(this.SelectCourseVo).then(resp => {
        this.courseList = resp.data
      })
    },
    //添加课程
    AddCourse(){
      this.CourseDate={}
      this.addVisible=true
    },
    Add(){
      api.Add(this.CourseDate).then(resp=>{
        this.$message({
          type: 'success',
          message: '添加成功!!'
        });
        this.addVisible = false;
        this.fetchData()
        this.CourseDate={}
        this.options=[]
      })
    },
    //删除课程
    RemoveCourse(id){
      
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.Deletecourse(id).then(resp => {
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()
        })

        })
    },
    //编辑课程
      //数据回显
    EditCourse(id){
      this.CourseDate={}
      this.dialogVisible = true;
      api.SelectByID(id).then(resp=>{
        this.CourseDate = resp.data
      })

    },
      //提交编辑课程
    editUpdata(){
      api.Updata(this.CourseDate).then(resp=>{
        this.$message({
          type: 'success',
          message: '更新成功!'
        });
        this.dialogVisible = false;
        this.fetchData()
        this.CourseDate={}
        this.options=[]
      })
    },
    //图片相关
    handleAvatarSuccess(res, file) {
        let formData = new FormData();
        // 将文件传给后端下载
        formData.append("file", file);
        this.$message.success(res.message);
        // this.fetchall();
        this.CourseDate.url = res.data.imgUrl;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //清空当前已经选择的所有条件
      ClearSelect(){
        this.SelectCourseVo={}
        this.options=[]
        this.fetchData()
      },
      StepPage(o){
        this.$router.push('/LearnSpace/DetailVideo?id='+o.id+'&courseName='+o.courseName+'&teacherId='+o.teacherId);
      }



  }
}
</script>
<style scoped>
  @import '../../../styles/course.css';
</style>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>